<template>
  <div>
    <!-- header区域 -->
    <header class="category-header wrap">
      <i class="iconfont iconfont-left" @click="gohome"></i>
      <div class="header-search">
        <i class="iconfont iconfont-wxbsousuotuiguang"></i>
        <span class="search-title" to="./search">11.11随心所欲Go</span>
      </div>
      <i class="iconfont iconfont-gengduo1"></i>
    </header>
  
    <!-- 内容区域 -->
    <section class="category-wrap" ref="categoryWrap">
      <!-- 左侧分类导航 -->
      <div class="nav-side-wrapper" ref="sidewrapper">
        <ul class="nav-side">
          <li
            :class="{ active: selectItem === index }"
            v-for="(item, index) in categoryList"
            :key="index"
            @click="handClickItem(index)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>

      <!-- 右侧商品数据 -->
      <div class="content-wrapper" ref="contentwrapper">
        <div class="content-slide">
          <img
            :src="contentData.mainImgUrl"
            class="category-main-img"
          />
          <div class="category-list" v-for="(item, index) in contentData.list" :key="index">
            <p class="catogory-title">{{item.title}}</p>
            <div class="product-item" v-for="(proItem, idx) in item.productList" :key="idx">
              <img
                :src="proItem.imgUrl"
                class="product-img"
              />
              <p class="product-title">{{ proItem.title}}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <tabbar :active="1" />
  </div>
</template>

<script>
// 导入 自定义组件
import tabbar from "../../components/tabbar.vue";
import BScroll from "@better-scroll/core";
import { getcategoryData } from "../../api";
export default {
  data() {
    return {
        list:[1,2,3,4,5,6,7,8],
      categoryList: [],
      selectItem: 0,
      contentData: {},
    };
  },
  components: {
    tabbar,
  },
  created() {
      this.getcategory()
  },
  mounted() {
    // console.log(this);

    // 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
    this.$nextTick(function () {
      this.setWrapperHeight();

      // 兼容手机 浏览器 滚动效果
      let wrapper = document.querySelector(".nav-side-wrapper");
      new BScroll(wrapper);

      new BScroll(this.$refs.contentwrapper);
    });
    // setTimeout(() => {
    //   this.setWrapperHeight();
    // }, 300);
  },
  methods: {
    gohome() {
      this.$router.push("/home");
    },
    getcategory(){
          getcategoryData((res) => {
        // console.log(res);
        this.categoryList = res.data;
        if (this.categoryList.length > 0) {
          this.contentData = this.categoryList[0];
        }
      });
    },
    // 固定 内容 容器的高度
    setWrapperHeight() {
      // 获取 设备屏幕高度
      // console.log(window.screen.height);
      // 获取 Header 高度
      const headEleH = document.querySelector(".category-header").clientHeight;
      // 计算  内容高度
      const contentH = window.screen.height - headEleH - 50;
      // 固定 左侧列表高度
      this.$refs.sidewrapper.style.height = contentH + "px";
      // 固定右侧商品 内容高度
      this.$refs.contentwrapper.style.height = contentH + "px";
    },
    // 选中 左侧列表选项
    handClickItem(index) {
      this.selectItem = index
      this.contentData = this.categoryList[index]
    }
  },
};
</script>

<style lang="scss" scoped>


@import "../../components/style/mixin";
.category-header {
  position: fixed;
  left: 0;
  top: 0;
  @include fj;
  width: 100%;
  height: 100px;
  line-height: 100px;
  padding: 0 30px;
  @include boxSizing;
  font-size: 30px;
  color: #656771;
  z-index: 10000;

  &.active {
    background: $red;
  }

  .iconfont-31fanhui1 {
    font-size: 50px;
    font-weight: bold;
  }

  .header-search {
    display: flex;
    width: 80%;
    height: 40px;
    line-height: 40px;
    margin: 20px 0;
    padding: 10px 0;
    color: #232326;
    background: #f7f7f7;
    @include borderRadius(40px);

    .iconfont-wxbsousuotuiguang {
      padding: 0 20px 0 40px;
      font-size: 34px;
    }

    .search-title {
      font-size: 24px;
      color: #666;
    }
  }

  .iconfont-gengduo1 {
    font-size: 40px;
  }
}
.category-wrap {
  @include fj;
  width: 100%;
  margin-top: 100px;
  background: #f8f8f8;
  border-top: 1px solid #999;

  .nav-side-wrapper {
    width: 28%;
    height: 100%;
    overflow: scroll;

    .nav-side {
      width: 100%;
      @include boxSizing;
      background: #f8f8f8;

      li {
        width: 100%;
        height: 92px;
        text-align: center;
        line-height: 92px;
        font-size: 28px;

        &.active {
          color: $red;
          background: #fff;
        }
      }
    }
  }

  .content-wrapper {
    width: 72%;
    height: 100%;
    overflow: scroll;

    .content-slide {
      width: 100%;
      padding: 0 20px;
      background: #fff;
      @include boxSizing;

      .category-main-img {
        width: 100%;
      }

      .category-list {
        display: flex;
        flex-wrap: wrap;
        flex-shrink: 0;
        width: 100%;

        .catogory-title {
          width: 100%;
          font-size: 34px;
          font-weight: 500;
          padding: 40px 0;
        }

        .product-item {
          width: 33.3333%;
          margin-bottom: 20px;
          text-align: center;
          font-size: 30px;

          img {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>

